<template>
  <div class="header">
    <div class="w">
      <div class="hd">
        <h1>
          <img src="../assets/img/indexLogo.6f8ac4f0.png" alt="" />
        </h1>

        <ul>
          <li
            :class="{ cur: $route.path == '/home' }"
            @click="$router.push('/home')"
          >
            首页
          </li>
          <li
            :class="{ cur: $route.path == '/goods' }"
            @click="$router.push('/goods')"
          >
            全部商品
          </li>
          <li
            :class="{ cur: $route.path == '/user' }"
            @click="$router.push('/user')"
          >
            个人中心
          </li>
          <li
            :class="{ cur: $route.path == '/order' }"
            @click="$router.push('/order')"
          >
            我的订单
          </li>
          <li
            :class="{ cur: $route.path == '/free' }"
            @click="$router.push('/free')"
          >
            专属福利
          </li>
        </ul>
        <div class="sou1">
          <input
            type="text"
            placeholder="输入关键字"
            v-model="userInputSearch"
          />

          <span class="sou" @click="toSearch">
            <img src="../assets/img/search.png" alt="" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { userInputSearch: "" };
  },
  methods: {
    toSearch() {
      console.log("准备搜索", this.userInputSearch);
      //跳转到/goods,并携带上参数
      this.$router.push(`goods?keyword=${this.userInputSearch}`);
      //清空文本框内容
      this.userInputSearch = "";
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  .w {
    width: 1200px;

    margin: auto;
    .hd {
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        //   background: #0a328e;
      }

      ul {
        display: flex;
        justify-content: space-between;
        width: 500px;
        font-size: 16px;
        font-family: SourceHanSansSC;
        font-weight: 500;
        li {
          cursor: pointer;
        }
        .cur {
          color: #0a328e;
          font-weight: 700;
        }
      }
      .sou1 {
        display: flex;

        input {
          outline: none;

          padding-left: 12px;
          width: 214px;
          height: 40px;
          border: 1px solid #dedede;
          border-radius: 20px 0px 0px 20px;
          box-sizing: border-box;
        }
        .sou {
          cursor: pointer;
          width: 50px;
          height: 40px;
          background: #0a328e;
          border-radius: 0px 20px 20px 0px;
          line-height: 40px;
          text-align: center;
          img {
            width: 15px;
            height: 15px;
          }
        }
      }
    }
  }
}
</style>
